<template>
  <x-main>
    <view class="x-box x-small-top">
      <x-preview title="订单信息" :data="orderInfo" :columns="orderCol">
        <view slot="desc" class="desc x-inner-small-top">如发现以上信息有误，请及时联系商家</view>
      </x-preview>
    </view>

    <view class="x-box x-small-top">
      <x-box title="授权获取手机号">
        <x-input v-model="state.name" placeholder="请输入您的姓名" label="姓名"></x-input>
<!--        <x-input @blur="onChange" v-model="state.phone" placeholder="请输入常用的手机号码" label="手机号码"></x-input>-->
        <x-cell :border="false" :value="state.phone" title="手机号码">
          <template #value>
            <view class="x-row">
              <view class="x-value x-small-right">{{state.phone}}</view>
              <!--            <button @click="getPhoneNumber" >授权手机号</button>-->
              <button open-type="getAuthorize" scope="phoneNumber" @getAuthorize="getPhoneNumber" onError="handleAuthError">授权手机号</button>
            </view>
          </template>
        </x-cell>
      </x-box>
    </view>
  </x-main>
  <x-bottom>
    <view @click="onSign" class="x-btn x-btn-primary">确认以上信息 并前往签约</view>
  </x-bottom>
</template>

<script setup>
import XOrderQrcode from '@/components/logic/order/qrcode';
import XPreview from '@/components/lib/preview'
import {reactive, ref} from "vue";
import {onLoad} from "@dcloudio/uni-app";
import orderStore from '@/stores/modules/order';
import userStore from '@/stores/framework/user';
import {storeToRefs} from "pinia";
const OrderStore = orderStore();
const UserStore = userStore();
const {orderInfo} = storeToRefs(OrderStore);
const {user} = storeToRefs(UserStore);
import {Helper, Constant, Msg} from 'core';
//订单基本信息
const orderCol =  ref([
  {label: "订单标签", field: "orderTagDesc"},
  {label: "每期金额", field: "termAmount", suffix: "元"},
  {label: "期数", field: "leaseTerm", suffix: "期"},
  {label: "起租日", field: "leaseStartDate"},
  {label: "还款周期", field: "payCycleDesc"},
  // {label: "还款方式", field: "f1"},
  {label: "订单状态", field: "orderStateDesc"},
  {label: "订单备注", field: "orderRemark"}
]);

const state = reactive({
  name: "",
  phone: "",
})

onLoad(async option => {
  if(! Helper.empty(user.value.phone)) {
    state.phone = user.value.phone;
  }

  if(! Helper.empty(user.value.name)) {
    state.name = user.value.name;
  }

  let orderNo = option.orderNo;
  await OrderStore.getInfo(orderNo);

  // console.log(orderInfo.value.orderState)
  //todo 先判断订单是否已确认 非待确认跳转至详情
  if(orderInfo.value.orderState != Constant.ORDER.KEY.WAIT_CONFIRM) {
    uni.redirectTo({url: "/pages/order/detail?orderNo=" + orderNo})
    return;
  }

  await OrderStore.bindOrder(orderNo);
})

/**
 * 获取手机号授权
 */
const getPhoneNumber = () => {
  my.getPhoneNumber({
    success: async (res) => {
      let encryptedData = res.response;
      console.log(res);
      let data = JSON.parse(encryptedData);
      // console.log("encryptedData:", encryptedData, data);

      let phone = await UserStore.encrypted(data.response, state.name);
      if(! Helper.empty(phone)) {
        state.phone = phone;
      }
    },
    fail: (res) => {
      console.log(res);
    },
  });
}

const onSign = async () => {
  if(Helper.empty(state.name)) {
    Msg.error("请先输入姓名");
    return;
  }

  if(Helper.empty(state.phone)) {
    Msg.error("请先授权手机号");
    return;
  }

  let str = await OrderStore.sign(orderInfo.value.orderNo);
  console.log(str, 'str')
  if(! Helper.empty(str)) {
    my.tradePay({
      orderStr: str,
      success: (res) => {
        if (res.resultCode == 9000) {
          Msg.success("处理成功");
          resolve(true);
          return;
        }
        Msg.error("处理失败，状态码：" + res.resultCode)
        resolve(false);
      },
      fail: (err) => {
        Msg.error("发起签约异常:" + (typeof err == 'object' ? JSON.stringify(err) : err));
        resolve(false);
      }
    })
  }
}

</script>

<style scoped lang="less">
.x-box {
  background-color: #ffffff;
  margin-bottom: 20rpx;
}

.desc {
  color: #999999;
  font-size: 28rpx;
  text-align: center;
}

.link {
  color: @primary;
  padding-top: 60rpx;
  text-align: center;
}

.note {
  color: red;
  font-size: 24rpx;
  padding: 10rpx;
  box-sizing: border-box;
  text-align: center;
}

.btn {
  width: 220rpx
}

button {
  width: 160rpx;
  height: 64rpx;
  font-size: 24rpx;
  line-height: 64rpx;
  border-radius: 8rpx;
  background-color: @primary;
  border: none;
  font-szie: 24rpx;
  color: #ffffff
}
</style>
